<template>
	<view class="personal">
		<view class="flex-between top">
			<view class="flex-column">
				<view class="flex-column mt30" style="align-items: flex-start;">
					<view class="fs20">
						{{$t('username')}}：<span>{{userIndex?.username}}</span>
					</view>
					<view class="flex">
						<view class="fs20">{{$t('name')}}：<span class="">{{userIndex?.nickname}}</span></view>
						<!-- <view class="fs12 user-level flex-between">
							<image src="/static/diamond.png" mode=""></image>
							<text>{{userIndex?.level_name}}</text>
						</view>
						<view class="flex-between user-xyf">
							<image class="icon-xs" style="margin-right: 4px;" src="/static/xyz.png" mode=""></image>
							<text class="fs12">{{$t('personal.text1')}}:{{userIndex?.credit}}</text>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="mt20 card-info1 flex-between">
			<view class="flex-column">
				<text class="fs12">{{$t('personal.text2')}}(CNY)</text>
				<view class="balance mt10 fs16" style="color: #333;font-weight: bold;">
					<text class="unit">￥</text>{{userIndex?.total_money}}
				</view>
				<view class="mt10 fs12 text-des-color">
					<text>≈</text>
					<text class="unit">{{userIndex?.total_money_usdt}}USD</text>
				</view>
			</view>
			<view class="flex-1"></view>
			<view class="flex-between" style="margin-top: 33px;">
				<view class="flex-column">
					<text class="label text-des-color fs12">{{$t('personal.text3')}}</text>
					<text class="data mt5 fs12">{{userIndex?.total_yk}}</text>
				</view>
				<view class="flex-column" style="margin-left: 41px;">
					<text class="label text-des-color fs12">{{$t('personal.text4')}}</text>
					<text class="data mt5 fs12">{{userIndex?.day_yk}}</text>
				</view>
				<image src="/static/cny.png" class="position-absolute"
					style="width: 46px; height: 28px; right: 12px; top: 12px;" mode=""></image>
			</view>
		</view>
		<view class="flex mt10 fs12">
			<view class="flex-column radius-12"
				style="padding: 13px; width: 152px; align-items: flex-start;background-color: var(--theme-box-bg);">
				<text class="label text-des-color fs12">{{$t('personal.text5')}}(CNY)</text>
				<text class="data mt10 fs14 fb">￥{{userIndex?.money}}</text>
			</view>
			<!-- 入金 -->
			<navigator class="radius-12" url="/pages/personal/deposit/deposit" hover-class="navigator-hover">
				<view class="flex-column" style="margin-left: 10px; padding: 13px; width: 85px;background-color: var(--theme-box-bg);">
					<image src="/static/rj.png" class="icon-md" mode=""></image>
					<text class="data mt5 fs14 fb">{{$t('personal.text6')}}</text>
				</view>
			</navigator>
			<navigator class="radius-12" url="/pages/personal/inOrout/withdraw" hover-class="navigator-hover">
				<view class="flex-column" style="margin-left: 10px; padding: 13px; width: 85px;background-color: var(--theme-box-bg);">
					<image src="/static/personal/cj.png" class="icon-md" mode=""></image>
					<text class="data mt5 fs14 fb">{{$t('personal.text7')}}</text>
				</view>
			</navigator>
		</view>
		<view class="mt10" style="padding-bottom: 70px;	">
			<view class="flex-column menu">
				<view v-for="(item,index) in list" :key="index" @click="goPage(item)"
					class="my-item radius-12 fs14 flex-between mt10"
					style="box-sizing: border-box;background-color: var(--theme-box-bg);">
					<view class="flex flex-1">
						<image :src="`/static/personal/${item.img}.png`" class="circle mr10" mode=""></image>
						<text class="pid-text-ususal fs14">{{item.label}}</text>
						<view class="flex-1"></view>
					</view>
					<uni-icons type="right" color="#999" size="15"></uni-icons>
				</view>
			</view>
		</view>
		<uni-popup ref="alertDialog" type="dialog" backgroundColor="var(--theme-box-bg)">
			<uni-popup-dialog type="info" :cancelText="$t('cancel')" :confirmText="$t('confirm2')"
				:title="$t('personal.text8')" content="您确定要退出登录吗？" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<meiQia ref="meiqiaRef"></meiQia>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		getUserInfo,
		logout
	} from '../../api';
	import config from '../../config';
	import useGlobalProperties from '../../utils/useGlobalProperties.js'
	import meiQia from '../../components/meiQia.vue';
	import { useUserStore } from '@/store/index.js'
	const {
		$t,
		$i18n
	} = useGlobalProperties()
	const userStore = useUserStore()
	const alertDialog = ref(null)
	const list = [{
			label: $t('personal.text10'),
			img: 'smrz',
			url: '/pages/personal/verify/verify'
		},
		{
			label: $t('personal.text11'),
			img: 'wddd',
			url: '/pages/personal/order/order'
		},
		{
			label: $t('personal.text12'),
			img: 'kjrj',
			url: '/pages/personal/deposit-list/deposit-list'
		},
		{
			label: $t('personal.text13'),
			img: 'cj',
			url: '/pages/personal/withdraw-list/withdraw-list'
		},
		{
			label: $t('personal.text14'),
			img: 'cwjl',
			url: '/pages/personal/finance/finance'
		},
		{
			label: $t('personal.text15'),
			img: 'ck',
			url: '/pages/personal/withdraw-account/withdraw-account'
		},
		{
			label: $t('personal.text16'),
			img: 'sz',
			url: '/pages/personal/setting/setting'
		},
		{
			label: $t('personal.text8'),
			img: 'tcdl',
			url: ''
		},
	]
	const goPage = (item) => {
		if (item.url) {
			uni.navigateTo({
				url: item.url
			})
		} else {
			alertDialog.value.open()
		}
	}
	const dialogClose = () => {
		alertDialog.value.close()
	}
	const meiqiaRef = ref(null);

	const callShowPanel = () => {
		window.location.href = config.BASE_URL + "/addons/kefu/index/mobile"
		// if (meiqiaRef.value) {
		//   meiqiaRef.value.showPanel(); // 调用子组件的 showPanel 方法
		// }
	};
	const dialogConfirm = () => {
		// 退出登录
		logout().then(res => {
			setTimeout(() => {
				uni.clearStorage()
				userStore.setUserInfo({});
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}, 1500)
		})
	}
	const userIndex = ref({})
	onMounted(() => {
		getUserInfo().then(res => {
			console.log('用户信息',res);
			userStore.setUserInfo(res.data);
			userIndex.value = res.data
			uni.setStorageSync('ISREALID', res.data.user_check_status)
			uni.setStorageSync('USERINDEX', res.data)
		})
	})
	onShow(() => {
		getUserInfo().then(res => {
			// console.log('用户信息',res);
			userIndex.value = res.data
			uni.setStorageSync('ISREALID', res.data.user_check_status)
			uni.setStorageSync('USERINDEX', res.data)
		})
	})
</script>

<style scoped lang="scss">
	.personal {
		width: 100%;
		min-height: 100vh;
		padding: 0 16px;
		color: var(--theme-text-color);
		box-sizing: border-box;
		background: radial-gradient(circle at 70% 40%, #1A4B4B);
	}

	.user-level {
		background-color: #e4e3ff;
		color: #3f427e;
		border-radius: 11px;
		padding: 0px 3px;
		margin-left: 6px;
		height: 18px;

		image {
			margin-right: 2px;
			width: 12px;
			height: 12px;
		}
	}

	.user-xyf {
		border-radius: 11px;
		background-color: #fff;
		padding: 5px;
		color: rgb(37, 188, 115);
		height: 21px;
		box-sizing: border-box;
	}

	.icon-xs {
		width: 13px;
		height: 13px;
	}

	.icon-md {
		width: 26px;
		height: 26px;
	}
	.top{
		margin-top: calc(15px + var(--status-bar-height));
		color: #fff !important;
		position: relative;
		border-radius: 12px;
		padding: 12px;
		background: url(/static/mine_bg.png) 0% 0% / cover no-repeat;
	}
	.card-info1 {
		color: #222;
		position: relative;
		border-radius: 12px;
		padding: 12px;
		background: url(/static/top-bg.png) 0% 0% / cover no-repeat;
	}

	.my-item {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
	}

	.menu image {
		width: 26px;
		height: 26px;
	}

	::v-deep .uni-popup__info {
		color: #222;
	}
</style>